﻿
@{
    ViewBag.Title = "趋势数据分析";
}
<link href="~/Content/Trend/index.css" rel="stylesheet" />
<section class="content">
    <!--内容标题-->
    <div class="content-title row">
        <div class="col-md-6">
            <h3 class="title-brand">趋势数据分析</h3>
        </div>
        <div class="col-md-6">
            <form class="title-form form-inline" action="">
                <div class="form-group">
                    <label class="control-label" for="">部件选择</label> <span class="glyphicon glyphicon-search"></span>
                    @Html.DropDownList("ComponentSelect", (IEnumerable<SelectListItem>)ViewBag.ComponentSelectList, new { @class = "form-control" })
                </div>
                <div class="form-group">
                    <label class="control-label" for="">日期选择</label> <span class="glyphicon glyphicon-search"></span>
                    @Html.DropDownList("DateSelect", (IEnumerable<SelectListItem>)ViewBag.DateSelectList, new { @class = "form-control" })
                </div>
                <div class="form-group">
                    <label class="control-label" for="">取值功率</label> <span class="glyphicon glyphicon-search"></span>
                    @Html.DropDownList("PowerSelect", (IEnumerable<SelectListItem>)ViewBag.PowerSelectList, new { @class = "form-control" })
                </div>
            </form>
        </div>
    </div>

    <div class="container-fluid">
        <div class="content-component row">
            <!--故障组件信息-->
            <div class="col-md-6">
                <!--布局图22-->
                <div class="panel panel-map panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">趋势数据分析布局显示</div>
                    </div>
                    <div class="panel-body">
                        <div id="map-wrap">
                            <div id="map">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <h4 class="sensor-title"><strong>传感器趋势数据曲线</strong></h4>
            </div>
        </div>
    </div>



    <div class="container-fluid">
        <div class="row" id="content-charts">
        </div>
    </div>
</section>

<!--风机布局图信息框-->
<div id="map-tip">
    <p><span id="map-tip-turbine"></span>号风机</p>
    <p id="map-tip-msg"></p>
</div>


@section scripts{
    <script src="~/Scripts/echarts.min.js"></script>
    <script src="~/Scripts/Trend/drawCharts.js"></script>

    <!--左侧导航显示-->
    <script>
        $(function () {
            //展开当前左侧栏父节点
            $("#Trend").addClass("in");
            $("#Trend>li:first>a").addClass("sidebar-active");
        });
    </script>

    <!--页面初始化-->
    <script>
        var _trendData;  //趋势数据缓存，只有日期改变会读取数据库，其他情况则读取缓存
        var mapLoaded = false;   //布局图载入完成标志
        var dataLoaded = false;   //布局图数据载入完成标志 (布局图和布局图数据分别异步载入)
        var _currentTurbId = 1;   //当前风机ID

        $(function () {
            $("#map").load("/Content/images/turbine.svg", function () {
                mapLoaded = true;   //布局图载入完成

                $("#map #t1 path").css("fill", "#00FF00");   //1号风机显示绿色

                if (dataLoaded) {
                    //drawMapColor();
                }
            });
            initialSelects();
            loadChartsFirst();
        })
    </script>

    <script>

        var loadChartsFirst = function () {
            var day = $("#DateSelect").val();
            getTrendData(day);
        }

        //绑定下拉列表事件
        var initialSelects = function () {
            //部件下拉列表
            $("#ComponentSelect").change(function () {
                loadChartsFromBuff();
            })
            $("#PowerSelect").change(function () {
                loadChartsFromBuff();
            })
            //日期下拉列表
            $("#DateSelect").change(function () {
                var day = $("#DateSelect").val();
                getTrendData(day);   //改变日期，重新读取数据并填充
            })
        }

        //从缓存中读取数据，并加载图表
        var loadChartsFromBuff = function () {
            var turbineId = _currentTurbId;
            var modelId = $("#PowerSelect").val();
            var componentId = $("#ComponentSelect").val();

            loadCharts(turbineId, componentId, modelId);
        }
    </script>

    <!--读取数据-->
    <script>
        //获取某个日期之后的所有趋势数据
        var getTrendData = function (day) {
            var data = { "day": day };   //参数必须为json对象，且与后台参数同名
            $.getJSON('@Url.Action("GetTrendData", "Trend")', data, function (result) {
                _trendData = result;   //写入缓存
                loadChartsFromBuff();
            })
        }
    </script>

    <!--处理图表-->
    <script>
        //装载图表
        var loadCharts = function (turbineId, componentId, modelId) {
            //清空图表
            $("#content-charts").empty();
            //异步传递参数
            //var date = $("#DateSelect").val();
            //var data = { "day": date, "turbineId": turbineId };
            //根据部件不同，调用不同的图表渲染方法 (不同的部件，图表个数，文本，高度，数据源皆不同)
            switch (componentId) {
                case '1':  //部件1
                    //...
                    break;
                case '5':  //部件5：主传动链
                    drawCom5_HTML();
                    drawCom5_Chart(_trendData, turbineId, modelId);
                    break;
                default:
            }
        }
    </script>

    <!--处理布局图图标-->
    <script>
        var turb;   //当前风机
        var normalTransform = 0;   //正常的Transform参数值
        //鼠标覆盖风机，放大
        var turb_mouseover = function (e) {
            //show tip
            var tid = $(e.currentTarget).attr("tId");
            //showMapTip(tid, e.clientX + 10, e.clientY + 30);

            //If IE
            if (IsIE()) return;
            //If else
            turb = $("#t" + tid);
            normalTransform = turb.attr("transform");
            var c = normalTransform.match(/\d{1,3},\d{1,3}/).toString().split(',');
            var lgTransform = "translate(" + String(c[0] - 5) + "," + String(c[1] - 5) + ") scale(1.2,1.2)";  //放大后的Transform参数值
            turb.attr("transform", lgTransform);

        }
        //鼠标移出风机，还原
        var turb_mouseout = function (e) {
            //hide tip
            $("#map-tip").hide();

            //if IE
            if (IsIE()) return;
            //if else
            turb.attr("transform", normalTransform);
        }

        var turb_click = function (e) {
            $("#map svg path").css("fill", "#FFF");   //置白

            var tid = $(e.currentTarget).attr("tId");
            _currentTurbId = tid;
            $("#map #t" + tid + " path").css("fill", "#00FF00");   //点击显示绿色

            loadChartsFromBuff();
        }

        //显示提示框
        //var showMapTip = function (tid, x, y) {
        //    var msg = "";
        //    $.each(_componentFaultData, function (key, value) {
        //        if (value["TurbineId"] == tid) {
        //            msg = value["ComponentName"] + " : " + value["TotalTime"] + " 分钟\n";
        //        }
        //    })
        //    if (msg != "") {
        //        $("#map-tip").css({ "left": x, "top": y });
        //        $("#map-tip-turbine").text(tid);
        //        $("#map-tip-msg").text(msg);
        //        $("#map-tip").show();
        //    }
        //}

        //绘制风机图标颜色
        //var drawMapColor = function () {
        //    $("#map svg path").css("fill", "#FFF");
        //    var red = [];
        //    $.each(_componentFaultData, function (key, value) {
        //        $("#map #t" + value["TurbineId"] + " path").css("fill", "#FFFF00");
        //        if (value["TotalTime"] >= 1000) {
        //            red.push(value["TurbineId"]);
        //        }
        //    })
        //    red.forEach(function (id) {
        //        $("#map #t" + id + " path").css("fill", "#FF6600");
        //    })
        //}

    </script>

}